<template>
  <div>
    <ul>
        <li v-for="(item,index) in list" :key="index" @click="change(index)" :class="{active:newIndex==index}">{{item}}</li>
        
    </ul>
  </div>
</template>

<script>

export default {
    data(){
        return{
            list:["首页","点餐","我的"],
            newIndex:0
        }
    },
    methods:{
        change(index){
            this.newIndex = index;
        }
    }
}
</script>

<style lang="scss" scoped>
    div{
        width: 100%;
        height: 30px;


    }
    ul{
        height: 30px;
        display: flex;
        justify-content: space-around;
        list-style: none;
    }
    li{
        flex:1;
        text-align: center;
    }
    .active{
        background-color: skyblue;
        color: #fff;
    }
</style>